<template>
  <div class="HMFW_Map">
    <div class="menuList">
      <SubMenu :Routes="Routes" @onSelectNav="onSelectNav" :path="path"></SubMenu>
    </div>
    <div class="content">
      <KeepAlive>
        <transition name="fade" mode="out-in">
          <component :is="component"></component>
        </transition>
      </KeepAlive>
    </div>
  </div>
</template>

<script setup lang="ts">
import SubMenu from '@/components/Navbar/SubMenu.vue';
import useMapStore from '@/store/modules/map';
import { ref } from 'vue';
import type { TabsInstance } from 'element-plus';
import YGCW from './YGCW.vue';
import HNZC from './HNZC.vue';
import HNBT from './HNBT.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;

const tabPosition = ref<TabsInstance['tabPosition']>('left');
const path = ref('/ygcw');
const Routes = [
  {
    path: '/ygcw',
    Name: '阳光村务',
    id: 1
  },
  {
    path: '/hnzc',
    Name: '惠农政策',
    id: 2
  },
  {
    path: '/hnbt',
    Name: '惠农补贴',
    id: 3
  }
];
const onSelectNav = (item) => {
  path.value = item.path;
  console.log('item', item);
};
const component = computed(() => {
  if (path.value === '/ygcw') {
    return YGCW;
  } else if (path.value === '/hnzc') {
    return HNZC;
  }
  return HNBT;
});

onMounted(() => {});
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
// :deep(.el-dialog) {
//   // background: #2e79b0;
//   // background: rgb(25 61 96);
//   background: url('/images/popupBg.png');
//   background-size: 100% 100%;
//   background-repeat: no-repeat;
//   color: white;
//   .el-dialog__headerbtn > .el-dialog__close {
//     color: white;
//   }
//   .el-dialog__header {
//     display: contents;
//     padding: 0px 15px;
//   }
//   .el-dialog__title {
//     color: white;
//   }
// }
.HMFW_Map {
  height: 100%;
  width: 100%;
  display: flex;
  .menuList {
    width: 160px;
  }
  .content {
    flex: 1;
  }
}

::v-deep .pagination-container {
  margin-top: auto !important;
}

::v-deep .el-pagination__total {
  color: #fff;
}

::v-deep .news-content {
  color: #fff;
  height: 70vh;
  overflow-y: auto;

  .news-header {
    text-align: center;

    .title {
      line-height: 36px;
      max-width: 80%;
      margin: 0 auto;
      text-align: center;
      margin-bottom: 10px;
    }
  }

  .news-main {
    min-height: 300px;
    margin: 20px 0;
    padding: 0 20px;
    // max-height: 45vh;
    // overflow-y: scroll;

    img {
      width: 80%;
    }

    p:has(> img) {
      text-align: center !important;
    }
  }
}
</style>
